@import "../../../common";

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1110;
}

.container {
  position: relative;
}

.my-container {
  position: relative;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;

  .bg {
    image {
      width: 100%;
      height: 700rpx;
    }
  }
}
.no-login {
  @include fontStyle(32, 32, #000000, 500);
}

#canvas{
  width: 100%;
  height: 600rpx;
  background-color: #000;
}

.box {
  width: 100%;
  z-index: 1;
  box-sizing: border-box;
  padding: 0 20rpx;
  padding-top: 216rpx;
  .user {
    @include flex;
    box-sizing: border-box;
    padding: 0 24rpx;

    .header-img {
      margin-right: 26rpx;

      button {
        display: block;
        width: 100%;
        height: 100%;
        background-color: transparent;
        margin: 0;
        padding: 0;
      }

      image {
        @include size(110, 110, 50%);
      }
    }

    .user-info {
      .name {
        @include fontStyle(32, 32, #000000, 500);
      }

      .phone {
        margin-top: 16rpx;
        @include fontStyle(32, 32, #000000, 400);
      }
    }
  }

  .service {
    @include block;
    margin-top: 44rpx;
    padding-bottom: 0;

    .title {
      @include fontStyle(32, 32, #000000, 500);
      padding: 8rpx 0 40rpx 0;
    }

    .line {
      padding: 36rpx 0;
      @include flex-space-between;

      &.border-bottom {
        border-bottom: 1px solid #eeeeee;
      }

      .left {
        @include flex;

        image {
          @include size(40, 40);
        }

        text {
          margin-left: 16rpx;
          @include fontStyle(28, 28, #000000, 400);
        }
      }

      .right {
        @include flex;

        image {
          margin-left: 8rpx;
          @include size(24, 24);
        }

        text {
          @include fontStyle(28, 28, #999999, 400);
        }
      }
    }
  }

  .logout {
    margin: 128rpx 0;
    box-sizing: border-box;
    padding: 0 24rpx;

    view {
      height: 90rpx;
      background: var(--color-theme);
      border-radius: 45rpx;
      @include flex-center;
      @include fontStyle(32, 32, #ffffff, 500);
    }
  }
}
